<!--四级行星轮系传动比分配-->

<template>
    <div class="all" style="overflow-x: auto;overflow-y: auto">
        <!--    top-->

        <div class="top-sum">
            <div class="top-left">
                <div class="top-title">输入参数</div>
                <div class="top-contest">
                    <div class="contest-left">
                        <div class="contest-left-left-top">
                            <ul class="contest-left-left-top-ul-1">
                                <li></li>
                                <li>第1级行星轮系</li>
                                <li>第2级行星轮系</li>
                                <li>第3级行星轮系</li>
                                <li>第4级行星轮系</li>
                            </ul>
                            <ul class="contest-left-left-top-ul-2">
                                <li>最大宽径比</li>
                                <li class=""><input v-model="form.B1min"></li>
                                <li class="text3"><input v-model="form.B2min"></li>
                                <li class="text3"><input v-model="form.B3min"></li>
                                <li class="text3"><input v-model="form.B4min"></li>
                            </ul>
                            <ul class="contest-left-left-top-ul-2">
                                <li>行星轮个数</li>
                                <li><input v-model="form.Np1_max"></li>
                                <li><input v-model="form.Np2_max"></li>
                                <li><input v-model="form.Np3_max"></li>
                                <li><input v-model="form.Np4_max"></li>
                            </ul>
                        </div>

                        <div class="top-left-left-bottom">
                            <div style="width: 100%;height: 30%;display: flex">
                                <div style="height: 100%;width: 35%;text-align: right">
                                    <input v-model="form.ratio_D1_D2_min" style="margin-top: 5%;text-align: center;width: 45%;height: 70%">
                                </div>
                                <div style="height: 100%;width: 40%">
                                    <img style="width: 100%;height: 100%" src="@/assets/image/image_66_01.png">
                                </div>
                                <div style="width: 25%;height: 100%">
                                    <input v-model="form.ratio_D1_D2_max" style="text-align: center;margin-top: 5%;width: 70%;height: 70%">
                                </div>
                            </div>
                            <div style="width: 100%;margin-top: 0.5%;height: 29.5%;display: flex">
                                <div style="height: 100%;width: 35%;text-align: right">
                                    <input v-model="form.ratio_D2_D3_min" style="text-align: center;margin-top: 5%;width: 45%;height: 70%">
                                </div>
                                <div style="height: 100%;width: 40%">
                                    <img style="width: 100%;height: 100%" src="../../../assets/image/image_66_03.png">
                                </div>
                                <div style="width: 25%;height: 100%">
                                    <input v-model="form.ratio_D2_D3_max" style="text-align: center;margin-top: 5%;width: 70%;height: 70%">
                                </div>
                            </div>
                            <div style="width: 100%;margin-top: 0.5%;height: 29.5%;display: flex">
                                <div style="height: 100%;width: 35%;text-align: right">
                                    <input v-model="form.ratio_D3_D4_min" style="text-align: center;margin-top: 5%;width: 45%;height: 70%">
                                </div>
                                <div style="height: 100%;width: 40%">
                                    <img style="width: 100%;height: 100%" src="../../../assets/image/image_66_05.png">
                                </div>
                                <div style="width: 25%;height: 100%">
                                    <input v-model="form.ratio_D3_D4_max" style="text-align: center;margin-top: 5%;width: 70%;height: 70%">
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--                    right-->
                    <div class="contest-right">
                        <div class="contest-right-top">
                            <ul>
                                <li></li>
                                <li>6个行星轮</li>
                                <li>5个行星轮</li>
                                <li>4个行星轮</li>
                                <li>3个行星轮</li>
                            </ul>
                            <ul>
                                <li>不均载系数</li>
                                <li><input v-model="form.bb1"></li>
                                <li><input v-model="form.bb2"></li>
                                <li><input v-model="form.bb3"></li>
                                <li><input v-model="form.bb4"></li>
                            </ul>
                            <ul>
                                <li>齿数比限制值</li>
                                <li><input v-model="form.aa1"></li>
                                <li><input v-model="form.aa2"></li>
                                <li><input v-model="form.aa3"></li>
                                <li><input v-model="form.aa4"></li>
                            </ul>
                        </div>
                        <div class="contest-right-bottom">
                            <div style="display: flex;width: 100%;height: 40%">
                                <ul style="width: 50%;height: 100%;font-size: 16px;text-align: right">
                                    <li>总传动比</li>
                                </ul>
                                <ul style="width: 40%;height: 100%;margin-left: 2%">
                                    <li style="width: 100%;height: 100%;text-align: center"><input style="width: 60%;text-align: center;height: 80%" v-model="form.R0"></li>
                                </ul>
                            </div>
                            <div style="width: 100%;height: 40%;margin-top: 5%">
                                <div style="width: 90%;text-align: center;height: 98%;text-align: right">
                                    <button class="button-sum" @click="tclick">计算</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="top-right">
                <div style="width: 100%;height: 100%;margin-left: 10%;margin-top: 5%">
                    <img style="width: 80%;height: 80%" src="../../../assets/image/image_66_02.png">
                </div>
            </div>
        </div>
        <!--    middle-->
        <div class="middle-sum">
            <div class="middle-title">以外径最小为目标函数</div>
            <div style="width: 100%;height: 85%">
                <table style="text-align: center;width: 98%;height: 85%;margin-left: 1%;margin-top: 0.3%;">
                    <div class="middle-text" style="overflow-y: scroll">
                        <tr class="middle-text-tr" style="background-color: #EAEAEA">
                            <th>第1级行星轮个数</th>
                            <th>第2级行星轮个数</th>
                            <th>第3级行星轮个数</th>
                            <th>第4级行星轮个数</th>
                            <th>第1级行星轮齿数比</th>
                            <th>第2级行星轮齿数比</th>
                            <th>第3级行星轮齿数比</th>
                            <th>第4级行星轮齿数比</th>
                            <th>总体积表征量</th>
                            <th>第1级齿圈半径表征值</th>
                            <th>第2级齿圈半径表征值</th>
                            <th>第3级齿圈半径表征值</th>
                            <th>第4级齿圈半径表征值</th>
                            <th>第1级行星轮系齿圈宽径比</th>
                            <th>第2级行星轮系齿圈宽径比</th>
                            <th>第3级行星轮系齿圈宽径比</th>
                            <th>第4级行星轮系齿圈宽径比</th>
                            <th>第1级实际最大宽径比</th>
                            <th>第2级实际最大宽径比</th>
                            <th>第3级实际最大宽径比</th>
                            <th>第4级实际最大宽径比</th>
                        </tr>
                        <tr style="text-align: center" v-for="(item,index) in ans.rd_matrix" :key="index">
                            <td>{{item[0]}}</td>
                            <td>{{item[1]}}</td>
                            <td>{{item[2]}}</td>
                            <td>{{item[3]}}</td>
                            <td>{{item[4]}}</td>
                            <td>{{item[5]}}</td>
                            <td>{{item[6]}}</td>
                            <td>{{item[7]}}</td>
                            <td>{{item[8]}}</td>
                            <td>{{item[9]}}</td>
                            <td>{{item[10]}}</td>
                            <td>{{item[11]}}</td>
                            <td>{{item[12]}}</td>
                            <td>{{item[13]}}</td>
                            <td>{{item[14]}}</td>
                            <td>{{item[15]}}</td>
                            <td>{{item[16]}}</td>
                            <td>{{item[17]}}</td>
                            <td>{{item[18]}}</td>
                            <td>{{item[19]}}</td>
                            <td>{{item[20]}}</td>
                        </tr>
                    </div>
                </table>
            </div>
        </div>
        <!--    bottom-->
        <div class="bottom-sum">
            <div style="height: 100%;width: 100%;display: flex">
                <div style="width: 100%;height: 100%;box-shadow: 1.5px 1.5px 2px #aaaaaa;border: 0.5px solid rgba(231, 231, 231, 0.486);border-radius: 3px;">
                    <div class="bottom-title">以体积最小为目标函数</div>
                    <div class="bottom-text" style="text-align: center;">
                        <div style="height: 100%;width: 100%;overflow-y: scroll">
                            <table>
                                <tr style="background-color: #EAEAEA">
                                    <th>第1级行星轮个数</th>
                                    <th>第2级行星轮个数</th>
                                    <th>第3级行星轮个数</th>
                                    <th>第4级行星轮个数</th>
                                    <th>第1级行星轮系齿数比</th>
                                    <th>第2级行星轮系齿数比</th>
                                    <th>第3级行星轮系齿数比</th>
                                    <th>第4级行星轮系齿数比</th>
                                    <th>总体积表征量</th>
                                </tr>
                                <tr style="text-align: center;" v-for="(item,index) in ans.rm_matrix" :key="index">
                                    <td>{{item[0]}}</td>
                                    <td>{{item[1]}}</td>
                                    <td>{{item[2]}}</td>
                                    <td>{{item[3]}}</td>
                                    <td>{{item[4]}}</td>
                                    <td>{{item[5]}}</td>
                                    <td>{{item[6]}}</td>
                                    <td>{{item[7]}}</td>
                                    <td>{{item[8]}}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <div style="height: 100%;width: 100%">
                    <img style="width: 90%;height: 100%" src="../../../assets/image/image_66_04.png">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {OptiRatio_4stageP_increase_last} from "@/api/file";

    export default {
        created() {
            document.title = '四级NGW型行星轮系传动比分配'
        },
        name: "OptiRatio_4stageP_increase_last",
        data(){
            return{
                form:{
                    R0:500,
                    Np1_max:4,
                    Np2_max:4,
                    Np3_max:4,
                    Np4_max:4,
                    B1min:1,
                    B2min:1,
                    B3min:1,
                    B4min:1,
                    ratio_D1_D2_min:1,
                    ratio_D1_D2_max:1.2,
                    ratio_D2_D3_min:1,
                    ratio_D2_D3_max:1.2,
                    ratio_D3_D4_min:1,
                    ratio_D3_D4_max:1.2,
                    bb1:1,
                    bb2:1,
                    bb3:1,
                    bb4:1,
                    aa1:3,
                    aa2:3.7,
                    aa3:5.7,
                    aa4:11
                },
                ans:{
                    rd_matrix:"",
                    rm_matrix:"",                }
            }
        },
        methods:{
            tclick()
            {
                OptiRatio_4stageP_increase_last(this.form)
                    .then(res => {
                        console.log("打印结果");
                        console.log(res)
                        this.ans=res;
                    })
                    .catch(err => {
                        console.log(err);
                    });
            }
        }

    }
</script>

<style scoped>
    .all{
        width: 100%;
        height: 100%;
    }
    .top-sum{
        width: 100%;
        height: 56%;
        box-shadow: 1.5px 1.5px 2px #aaaaaa;
        border: 0.5px solid rgba(231, 231, 231, 0.486);
        border-radius: 3px;
        display: flex;
    }
    .top-left{
        width: 49.8%;
        height: 100%;
        /*background: #42b983;*/
        box-shadow: 1.5px 1.5px 2px #aaaaaa;
        border: 0.5px solid rgba(231, 231, 231, 0.486);
        border-radius: 3px;
    }
    .top-title{
        width: 100%;
        height: 8%;
        font-size: 17.5px;
        background-color: #D7D7D7;
        border-radius: 3px;
        padding-left: 3%;
        font-weight: bolder;
        margin-top: 0%;
        padding-top: 0.5%;
    }
    .top-contest{
        height: 92%;
        width: 100%;
        /*background: #6DD400;*/
        display: flex;
    }
    .contest-left{
        width: 50%;
        height: 100%;
        /*background: #42b983;*/
        padding-left: 0%;
    }
    .contest-left-left-top{
        display: flex;
        font-size: 16px;
        width: 100%;
        height: 50%;
        /*background-color: #42b983;*/
    }
    .contest-left-left-top-ul-1{
        height: 100%;
        width: 45%;
    }
    .contest-left-left-top-ul-1 li{
        text-align: right;
        width: 100%;
        height: 19.8%;
        margin-top: 0.1%;
    }
    .contest-left-left-top-ul-2{
        height: 100%;
        width: 30%;
        text-align: center;
        margin-left: 2%;
    }
    .contest-left-left-top-ul-2 li{
        height: 19.8%;
        margin-top: 0.1%;
        width: 100%;
    }
    .contest-left-left-top-ul-2 input{
        height: 98%;
        width: 80%;
        text-align: center;
    }
    .top-left-left-bottom{
        width: 100%;
        height: 49%;
        /*background-color: #6DD400;*/
        margin-top: 2%;
    }
    .contest-right{
        width: 50%;
        height: 100%;
        /*background-color: #686868;*/
        font-size: 16px;
    }
    .contest-right-top{
        height: 50%;
        width: 100%;
        display: flex;
    }
    .contest-right-top ul{
        width: 30%;
        height: 100%;
    }
    .contest-right-top li{
        height: 19.6%;
        width: 100%;
        text-align: right;
        margin-top: 0.2%;
    }
    .contest-right-top input{
        height: 99.8%;
        width: 80%;
        text-align: center;
        margin-top: 0.1%;
    }
    .contest-right-bottom{
        height: 30%;
        width: 100%;
        margin-top: 15%;
    }
    .button-sum{
        border-radius: 4px;
        border: 2px #686868;
        width: 30%;
        height: 98%;
        font-size: 16px;
        background-color: #6dd400;
        border-radius: 4px;
        border: 2px #686868;
    }
    .top-right{
        width: 50%;
        height: 100%;
        /*background-color: #42b983;*/
    }
    .middle-sum{
        width: 100%;
        height: 30%;
        /*background-color: #686868;*/
        margin-top: 0.2%;
    }
    .middle-title{
        width: 100%;
        height: 15%;
        font-size: 17.5px;
        background-color: #D7D7D7;
        border-radius: 3px;
        padding-left: 2%;
        font-weight: bolder;
        margin-top: 0%;
        padding-top: 0%;
    }
    .middle-table{
        width: 100%;
        height: 60%;
        background-color: #686868;
    }
    .middle-text{
        width: 100%;
        height: 100%;
        /*background-color: rebeccapurple;*/
    }
    .middle-text-tr{
        width: 100%;
        height: 100%;
    }
    /*.middle-text-tr th{*/
    /*    width: 2%;*/
    /*    height: 100%;*/
    /*    font-size: 12.5px;*/
    /*    text-align: center;*/
    /*}*/
    /*.middle-print{*/
    /*    height: 59.5%;*/
    /*    width: 100%;*/
    /*    !*background-color: darkmagenta;*!*/
    /*    margin-top: 0.5%;*/
    /*}*/
    .middle-print-tr{
        height: 100%;
        width: 80%;
    }
    .middle-print-tr td{
        width: 1%;
        height: 25%;
        /*border: 1px solid;*/
        text-align: center;
    }

    .bottom-sum{
        width: 100%;
        height: 30%;
        /*background-color: aquamarine;*/
    }
    .bottom-title{
        width: 100%;
        height: 15%;
        font-size: 17.5px;
        background-color: #D7D7D7;
        border-radius: 3px;
        padding-left: 2%;
        font-weight: bolder;
        margin-top: 0%;
        padding-top: 0%;
    }
    .bottom-text{
        height: 80%;
        width: 100%;
        /*background-color: rebeccapurple;*/
    }

    table tr:nth-child(even)
    {
        background: whitesmoke;
    }
</style>